<template>
  <Header></Header>
  <nav-swiper></nav-swiper>
  <div ref="target">
    <!-- <NewCourse v-if="targetIsVisible"></NewCourse> -->
    <NewCourse v-if="targetIsVisible"></NewCourse>
  </div>
  <footer-one></footer-one>
</template>

<script setup>
import Header from "@/components/Header/Header.vue";
import NavSwiper from "../components/Header/Home/NavSwiper.vue";
// import NewCourse from "../components/NewCourse.vue/NewCourse.vue";
import FooterOne from "../components/Footer/FooterOne.vue";

//异步组件
import { useIntersectionObserver } from "@vueuse/core";
const NewCourse = defineAsyncComponent(() =>
  import("../components/NewCourse/NewCourse.vue")
);
const target = ref(null);
const targetIsVisible = ref(false);

const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  if (isIntersecting) {
    targetIsVisible.value = isIntersecting;
  }
});
</script>

<style lang="scss" scoped></style>
